<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>会员列表</span>
</div>
	<el-row>
	<el-form :inline="true" :model="form" >
	  <el-form-item >
	    <el-input v-model="form.nickname" placeholder="昵称"></el-input>
	  </el-form-item>
	 <!--  <el-form-item >
	    <el-input v-model="form.mobile" placeholder="电话"></el-input>
	  </el-form-item> -->
	  <el-form-item >
	    <el-select v-model="form.level"  placeholder="分销体系">
	      <el-option 
	      v-for="item in sellerSystemList"
	      :label="item.title" :value="item.code"></el-option>
	    </el-select>
	  </el-form-item>
	  <el-form-item >
	    <el-select v-model="form.fx_level"  placeholder="分销级别">
	      <el-option
	      	v-for="item in distributionLevelList.results"
	       :label="item.title" :value="item.code"></el-option>
	    </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click="onSubmit">查询</el-button>
	  </el-form-item>
	</el-form>
	</el-row>

	<el-row>
	<el-table
    :data="memberList.results"
    border
    v-loading="loading"
    style="width: 100%">
	    <el-table-column
	      label="头像"
	      width="50"
	      >
	      <template slot-scope="scope">
	        <img :src="scope.row.headimgurl" width="30" height="30">
	      </template>
	    </el-table-column>
	    <el-table-column
	      prop="nickname"
	      label="昵称"
	      width="280">
	    </el-table-column>
	    <!-- <el-table-column
	      prop="mobile"
	      label="电话"
	      width="180">
	    </el-table-column> -->
	    <el-table-column
	      prop="fx_levelname"
	      label="分销级别"
	      width="360">
	      <template slot-scope="scope">
	      	{{getSellerSystemLabel(scope.row)}} / {{getSellerLevelListLabel(scope.row)}}
	      </template>
	    </el-table-column>
	    <el-table-column
	      fixed="right"
	      label="操作"
	      >
	      <template slot-scope="scope">
	      	<el-button type="primary" size="mini" 
	      	@click="edit(scope.row)">设置级别</el-button>
	        <el-button type="success" size="mini" 
	        @click="relationship(scope.row)">查看关系</el-button>
	        <el-button type="warning" size="mini" 
	        @click="statistics(scope.row)">销售统计</el-button>
	        
	      </template>
	    </el-table-column>
	</el-table>
	</el-row>

	<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="memberList.totalRecord">
    </el-pagination>
    </el-row>
</el-card>

<el-dialog title="设置用户级别" :visible.sync="editDlgVisible">
  <el-form :model="editForm" label-width="150px">
    
    <el-form-item label="分销体系 : ">
      <el-select v-model="editForm.level" placeholder="请选择分销体系">
        <el-option v-for="item in sellerSystemList"
         :label="item.title" :value="item.code"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="备注 : " >
      <el-input v-model="editForm.remark" autocomplete="off" style="width:300px;"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="editDlgVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </div>
</el-dialog>


<el-dialog title="用户关系" :visible.sync="relationshipDlgVisible">
  <el-form label-width="150px">
    
    <el-form-item label="上级 : ">
      {{relationshipForm.up.nickname}}
    </el-form-item>

    <el-form-item label="下级 : " >
    	<el-row>
		<el-table :data="relationshipForm.down.results" size="mini">
			<el-table-column label="头像" width="150">
				<template slot-scope="scope">
					<img :src="scope.row.headimgurl" width="30" height="30">
				</template>
			</el-table-column>
			<el-table-column property="nickname" label="姓名"></el-table-column>
		</el-table>
		</el-row>
		<el-row class="text-right mt20 mb20">
		<el-pagination
	      @size-change="relationshipFormhandleSizeChange"
	      @current-change="relationshipFormhandleCurrentChange"
	      :current-page="relationshipForm.pageNo"
	      :page-size="relationshipForm.pageSize"
	      layout="total, sizes, prev, pager, next"
	      :total="relationshipForm.down.totalRecord">
	    </el-pagination>
	    </el-row>
    </el-form-item>

  </el-form>


  <div slot="footer" class="dialog-footer">
    <el-button @click="relationshipDlgVisible = false">返回</el-button>
  </div>
</el-dialog>



<el-dialog title="销售统计" :visible.sync="statisticsDlgVisible" width="70%">
	<el-table :data="statisticsData" >
		<el-table-column property="name" label="产品"></el-table-column>
		<el-table-column property="attr_name" label="型号" width="200"></el-table-column>
		<el-table-column label="累计销售" width="100">
			<template slot-scope="scope">
				{{scope.row.my_num + scope.row.you_num}}
			</template>
		</el-table-column>
		<el-table-column property="my_num" label="自己销售" width="100"></el-table-column>
		<el-table-column property="you_num" label="下级销售" width="100"></el-table-column>
	</el-table>
  <div slot="footer" class="dialog-footer">
    <el-button @click="statisticsDlgVisible = false">返回</el-button>
  </div>
</el-dialog>


</div>		
</template>

<script>

import { mapGetters } from 'vuex';

export default {
	name: 'memberlist',

	data () {
		return {
			form : {
				nickname : '',
				mobile : '',
				level : '',
				fx_level : '',
			},

			pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

			loading : true,

			editDlgVisible : false,

			editForm : {
				level : '',
				remark : '',
				user_base : '',
			},

			relationshipDlgVisible : false,

			relationshipForm : {
				up : {},
				down : {},
				pageNo : 1,
				pageSize : 10,
				totalRecord : 0,
				totalPage : 0,
			},

			statisticsDlgVisible : false,

			statisticsData : [],


			currMember : {},
		}
	},

	components: {

		
	},

	computed : {
		...mapGetters([
			'memberList', 
			'sellerSystemList',
			//'sellerLevelList',
			'distributionLevelList',
		]),

		
	},

	methods : {
		handleClick () {

		},

		onSubmit () {
			this.getMemberList();
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.getMemberList();
		},


		handleCurrentChange (val) {
			this.pageNo = val;
			this.getMemberList();
		},

		getMemberList () {
			this.loading = true;
			let para = {
				fun : 'memberList',
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				nickname : this.form.nickname,
				mobile : this.form.mobile,
				level : this.form.level,
				fx_level : this.form.fx_level,
				cb : res => {
					this.loading = false;
				}
			};

			this.$store.dispatch('query', para);
		},


		edit (obj) {
			this.editForm.user_base = obj.user_base;
			this.editForm.level = obj.level;
			this.editForm.remark = obj.remark;
			this.editDlgVisible = true;
		},

		_getDownLevel () {
			let downPara = {
				fun : 'downLevel',
				user_base : this.currMember.user_base,
				pageNo : this.relationshipForm.pageNo,
				pageSize : this.relationshipForm.pageSize,
				cb : res => {
					console.log('下级信息');
					console.log(res);
					this.relationshipForm.down = res;
				}
			};

			this.$store.dispatch('query', downPara);
		},

		relationship (obj) {
			console.log(obj);
			this.currMember = obj;
			this.relationshipDlgVisible = true;

			let upPara = {
				fun : 'upLevel',
				user_base : obj.user_base,
				cb : res => {
					console.log('上级信息');
					console.log(res);
					this.relationshipForm.up = res;
				},
				err : res => {
					console.log('上级信息err');
					console.log(res);
					this.relationshipForm.up.nickname = '无';
				}
			};

			this.$store.dispatch('query', upPara);

			this._getDownLevel();

		},

		relationshipFormhandleSizeChange (val) {
			this.relationshipForm.pageSize = val;
			this._getDownLevel();
		},

		relationshipFormhandleCurrentChange (val) {
			console.log('relationshipFormhandleCurrentChange');
			console.log(val);
			this.relationshipForm.pageNo = val;
			this._getDownLevel();
		},

		save () {
			console.log(this.editForm);

			let para = {
				fun : 'updatelevel',
				cb : res => {
					console.log(res);
					this.$notify({
			          title: '成功',
			          message: '操作成功',
			          type: 'success'
			        });

			        this.editDlgVisible = false;
			        this.getMemberList();
				},
				err : res => {
					this.$notify({
			          title: '失败',
			          message: res,
			          type: 'error'
			        });
				},
				...this.editForm,
			};

			this.$store.dispatch('update', para);
		},

		getSellerSystemLabel (obj) {
			let label = '';
			if(this.sellerSystemList.results == undefined){
				return label;
			}
	      	for(let i = 0; i < this.sellerSystemList.length; i++){
	      		let tmp = this.sellerSystemList[i];
	      		if(obj.level == tmp.code){
	      			label = tmp.title;
	      			break;
	      		}
	      	}
	      	return label;
		},


		getSellerLevelListLabel (obj) {
			let label = '';
			if(this.distributionLevelList.results == undefined){
				return label;
			}
	      	for(let i = 0; i < this.distributionLevelList.results.length; i++){
	      		let tmp = this.distributionLevelList.results[i];
	      		if(obj.fx_level == tmp.code){
	      			label = tmp.title;
	      			break;
	      		}
	      	}
	      	return label;
		},


		statistics (obj) {
			this.statisticsDlgVisible = true;

			let para = {
				fun : 'statistics',
				pageNo : 1,
				pageSize : 50,
				openid : obj.user_base,
				fx_level : obj.fx_level,
				cb : res => {
					console.log(res);
					this.statisticsData = res;
				}
			};

			this.$store.dispatch('query', para);
		},
	},

	watch:{
	    
	},

	mounted () {
		this.getMemberList();
		this.$store.dispatch('getSellerSystemList');
		this.$store.dispatch('getDistributionLevelList');
	},

}
</script>

<style scoped>

</style>
